<template>
	<view>
		<!-- 弹出 -->
		<u-popup v-model="share_show" mode="bottom" :custom-style="rulestyle">
			<view class="share_area">
				<view class="share_content">
					<view class="share_title">
						邀请好友下单，获取返现!
					</view>
					<view class="share_btns FlexRow">
						<view class="Tbtns FlexColumn" @tap="getPoster" style="margin-right: 176rpx;">
							<view class="icon FlexColumn">
								<image :src="$getImageUri('resource/image/shopapi/uniapp/share1.png')" mode=""></image>
							</view>
							<view class="tit">
								生成海报
							</view>
						</view>
						<!-- #ifdef MP-WEIXIN-->
						<button open-type="share" class="Tbtns FlexColumn" hover-class="none">
							<view class="icon FlexColumn">
								<image :src="$getImageUri('resource/image/shopapi/uniapp/share2.png')" mode=""></image>
							</view>
							<view class="tit">
								分享链接
							</view>
						</button>
						<!-- #endif -->
						<!-- #ifdef H5 || APP-PLUS -->
						<view class="Tbtns FlexColumn" @tap="shareWx">
							<view class="icon FlexColumn">
								<image :src="$getImageUri('resource/image/shopapi/uniapp/share2.png')" mode=""></image>
							</view>
							<view class="tit">
								分享链接
							</view>
						</view>
						<!-- #endif -->
					</view>
				</view>
				<view class="share_close FlexRow">
					取消
				</view>


			</view>

		</u-popup>
		<!-- end -->

		<!-- #ifdef H5 -->
		<u-popup class="share-tips" v-model="showTips" mode="top">
			<view style="overflow: hidden;" @click="showTips = false">
				<image :src="$getImageUri('resource/image/shopapi/uniapp/share_arrow.png')" class="share-arrow" />
				<view class="white" style="text-align: center;margin-top: 280rpx;">
					<view class="bold lg">{{$zhTran('立即分享给好友吧')}}</view>
					<view class="sm m-t-10">{{$zhTran('点击屏幕右上角将本页面分享给好友')}}</view>
				</view>
			</view>
		</u-popup>
		<!-- #endif -->


		<u-popup v-model="Postershow" mode="center">
			<view class="Poster_area FlexColumn">
				<view class="Poster_content FlexColumn FlexItem">
					<view class="img_Box">
						<!-- <image></image> @success="handleSuccess" @complete="handleComplete" -->
						<dposter ref="poster" :options="rr_options" @success="handleSuccess"></dposter>

					</view>
				</view>
				<view class="Poster_bottom ">
					<view class="tit">
						- 长按转发好友或保存至手机 -
					</view>
					<view class="txt">
						保存海报后，即可分享给客户、客户群和微信朋友圈
					</view>
					<view class="potbtns FlexBetween">
						<view class="pbtn FlexRow" @click="Postershow = false">
							取消
						</view>
						<view class="pbtn FlexRow style2" @click="saveImageToAlbum">
							保存至手机
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import dposter from "@/bundle2/components/rebate_share_poster.vue";
	import {
		apiMnpQrCodeRra,
	} from '@/api/app'
	export default {
		name: 'sharearea',
		props: {
			show: {
				type: Boolean,
				default: false,
			},
			rra_id: {
				type: Number | String,
				default: '',
			},
			goods_id: {
				type: Number | String,
				default: '',
			},
			options: {
				type: Object,
				default: () => {
					return {}
				},
			},
		},
		data() {
			return {
				rr_options: {
					avatar: '',
					user_name: '',
					good_name: '',
					share_image: '',
					qr_code: ''
				},
				Postershow: false,
				showTips: false,
				share_show: false,
				rulestyle: {
					'background': 'none'
				},
				imgPath: '',
			}
		},
		watch: {
			show() { // 打开
				this.setBoole()
			},
			share_show() { // 关闭
				if (!this.share_show) {
					this.handleClose()
				}
			},
		},
		components: {
			dposter,
		},
		created() {
			this.rr_options = this.options
			this.setBoole()
			// this.$nextTick(() => {
			// 	this.$refs.poster.drawCanvas();
			// })
		},
		methods: {

			getCode() {
				apiMnpQrCodeRra({
						rra_id: this.rra_id, //	Integer	必填，非空	活动id
						goods_id: this.goods_id, //	Integer	必填，非空	商品id
					})
					.then((data) => {
						console.log(data, 'getCode')

						let qr_code = data.qr_code
						if (!qr_code) return

						console.log('options222', this.rr_options)
						this.rr_options.qr_code = qr_code
						console.log('options333', this.rr_options)
						this.share_show = false
						this.Postershow = true
						this.$nextTick(() => {
							this.$refs.poster.drawCanvas();
						})

					})
					.catch((err) => {
						console.log(err);
					});
			},

			shareWx() {
				// #ifdef H5
				this.showTips = true
				this.share_show = false
				// #endif
				// #ifdef APP-PLUS
				// uni.share({
				// 	provider: "weixin",
				// 	scene: "WXSceneSession",
				// 	type: 0,
				// 	href: this.getLink,
				// 	title: this.$zhTran(this.options.goods_name),
				// 	summary: '',
				// 	imageUrl: this.options.share_image,
				// 	success: (res) => {
				// 		console.log('分享成功');
				// 	},
				// 	fail: (err) => {
				// 		this.$toast({
				// 			title: err.errMsg
				// 		})
				// 	}
				// });
				// #endif
			},
			getPoster() {


				this.getCode()
			},
			setBoole() {
				if (this.show) {
					this.share_show = this.show
				}
			},
			handleClose() {
				this.$emit('update:show', false)
			},
			handleSuccess(val) {
				console.log('handleSuccess', this.imgPath, val)
				this.imgPath = val;
				this.sharePosterVisible = true
				this.loading = false
			},
			saveImageToAlbum() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.imgPath,
					success: (res) => {
						this.$toast({
							title: this.$zhTran("保存成功"),
						});
					},
					fail: (err) => {
						this.$toast({
							title: this.$zhTran("保存失败"),
						});
					},
				});
				// #endif
				// #ifdef H5
				this.$toast({
					title: this.$zhTran("请长按图片保存"),
				});
				// #endif
			},
		},
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-drawer-bottom {
		background: none !important;
	}

	.share_area {
		background: rgba(245, 246, 248, 1);
		width: 100%;
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;

		.share_content {
			background-color: #fff;
			width: 100%;
			height: 412rpx;
			padding-top: 50rpx;

			.share_title {
				font-size: 32rpx;
				font-weight: 550;
				color: rgba(0, 0, 0, 1);
				text-align: center;
				vertical-align: top;
				margin-bottom: 58rpx;
			}

			.share_btns {
				width: 100%;

				.Tbtns {

					.icon {
						width: 138rpx;
						height: 138rpx;
						margin-bottom: 26rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.tit {
						font-size: 28rpx;
						font-weight: 400;
						color: rgba(22, 22, 22, 1);
						text-align: center;
						vertical-align: top;

					}
				}
			}

		}

		.share_close {
			margin-top: 10rpx;
			width: 100%;
			height: 104rpx;
			background: rgba(255, 255, 255, 1);
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(22, 22, 22, 1);
			text-align: center;
			vertical-align: top;

		}
	}

	.share-tips .share-arrow {
		width: 140rpx;
		height: 250rpx;
		float: right;
		margin: 15rpx 31rpx 0 0;
	}

	.Poster_area {
		width: 100vw;
		height: 100vh;

		.Poster_content {
			width: 100%;

			.img_Box {
				background-color: #fff;
				height: 65%;
				border-radius: 10rpx;
				overflow: hidden;
				width: 600rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.Poster_bottom {
			width: 100%;
			height: 284rpx;
			background: rgba(255, 255, 255, 1);
			padding: 42rpx 20rpx 0 20rpx;

			.tit {
				font-size: 32rpx;
				font-weight: 700;
				color: rgba(22, 22, 22, 1);
				text-align: center;
				vertical-align: top;
			}

			.txt {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(128, 128, 128, 1);
				text-align: center;
				vertical-align: top;
				margin: 18rpx 0 30rpx 0;
			}

			.potbtns {
				width: 100%;

				.pbtn {
					width: 350rpx;
					height: 84rpx;
					border-radius: 4rpx;
					background: rgba(242, 246, 255, 1);

					font-size: 28rpx;
					font-weight: 400;
					color: rgba(64, 115, 250, 1);
					text-align: left;
					vertical-align: top;

				}

				.pbtn.style2 {
					color: #fff;
					background: rgba(64, 115, 250, 1);
				}
			}
		}
	}
</style>